<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-04-25 16:35:59
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-04-25 16:50:56
 * @FilePath: \Parking_Lot\src\views\trade\components\MountingsStore\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="MountingsStore">
    <!-- -->
    <div class="top">
      <div class="top-left">
        <div class="top-text">
          <div class="top-text-num ">{{partsData.vulnerablePartsNum}}</div>
          <div  class="top-text-name title-text ">易损件</div>
        </div>
      </div>
      <div class="top-right">
        <div class="item-view">
          <img :src="imgSrc" alt="" class="item-view-img">
          <div class="item-view-num ">{{partsData.vulnerablePartsList[0].partsNum}}</div>
          <div  class="item-view-name ">轮胎</div>
        </div>
        <div class="item-view">
          <img :src="imgSrc" alt="" class="item-view-img">
          <div class="item-view-num ">{{partsData.vulnerablePartsList[2].partsNum}}</div>
          <div  class="item-view-name ">刹车片</div>
        </div>
        <div class="item-view">
          <img :src="imgSrc" alt="" class="item-view-img">
          <div class="item-view-num ">{{partsData.vulnerablePartsList[4].partsNum}}</div>
          <div  class="item-view-name ">刹车油</div>
        </div>
        <div class="item-view">
          <img :src="imgSrc" alt="" class="item-view-img">
          <div class="item-view-num item-view-num2">{{partsData.vulnerablePartsList[1].partsNum}}</div>
          <div  class="item-view-name ">机油</div>
        </div>
        <div class="item-view">
          <img :src="imgSrc" alt="" class="item-view-img">
          <div class="item-view-num item-view-num3">{{partsData.vulnerablePartsList[3].partsNum}}</div>
          <div  class="item-view-name ">防冻液</div>
        </div>
      </div>
    </div>
    <div class="btm">
    <div class="btm-left">
        <div class="btm-text">
          <div class="btm-text-num ">{{partsData.partsNum}}</div>
          <div  class="btm-text-name title-text ">配件</div>
        </div>
      </div>
      <div class="top-right">
        <div class="item-view btm-item-view">
          <img :src="imgSrc" alt="" class="item-view-img">
          <div class="item-view-num ">{{partsData.partsList[0].partsNum}}</div>
          <div  class="item-view-name ">火花塞</div>
        </div>
        <div class="item-view btm-item-view">
          <img :src="imgSrc" alt="" class="item-view-img">
          <div class="item-view-num ">{{partsData.partsList[1].partsNum}}</div>
          <div  class="item-view-name ">喷油嘴</div>
        </div>
        <div class="item-view btm-item-view">
          <img :src="imgSrc" alt="" class="item-view-img">
          <div class="item-view-num ">{{partsData.partsList[2].partsNum}}</div>
          <div  class="item-view-name ">传动带</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ParkingLotIndex",
  props: ['partsData'],
  data() {
    return {
      imgSrc:require("@/assets/img/MountingsStore/iconImg.png")
    };
  },

  mounted() {},

  methods: {},
};
</script>
<style scoped lang="scss">
.MountingsStore {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .top {
      margin:5px 10px;
      width: calc(100% - 20px);
      flex: 1;
      background-image: url("@/assets/img/MountingsStore/kuang.png");
      /* 使背景图片铺满整个元素 */
      // background-size: cover;
      /* 固定高度 */
      background-size: 100% 100%;
      /* 其他可能的背景样式 */
      background-position: center; /* 背景图片居中 */
      background-repeat: no-repeat; /* 不重复背景图片 */
      display: flex;
      height: 100%;
      .top-left{
        background-image: url("@/assets/img/MountingsStore/indicator2.png");
        width: 100px;
        height: 80px;
        background-size: 100% 100%;
        /* 其他可能的背景样式 */
        background-position: center; /* 背景图片居中 */
        background-repeat: no-repeat; /* 不重复背景图片 */
        text-align: center;
        margin:20px;
        margin-top: 40px;
        .top-text{
          .top-text-num{
            color: #05f5fe;
            font-size: 26px;
            font-weight: bold;
          }
          .top-text-name{

          }
          .title-text{
            margin-top: 55px;
            background: #164A8A;
            // background: linear-gradient(to right, #091E54 0%,#0D3269 30%, #13518A 50%, #0D3269 70%,#091E54 100%);
            background: linear-gradient(to right, rgba(124,178,255,0.00), #13518A 50%, rgba(124,178,255,0.00) 100%);
            border-top: 1px solid #1785D0; /* 上边框 */
            border-bottom: 1px solid #1785D0; /* 下边框 */
            border-image: linear-gradient(to right, rgba(0,0,0,.1) 0%, #1785D0 50%, rgba(0,0,0,.1) 100%) 1;
            height: 20px;
            line-height: 20px;
            text-align: center;
            white-space: nowrap;       /* 确保文本不会换行 */
            overflow: hidden;          /* 隐藏超出容器的部分 */
            text-overflow: ellipsis;   /* 显示省略号 */
          }
        }
        
      }
      .item-view{
          // display: flex;
          float: left;
          width:15%;
          position: relative;
          // width: 10px;
          margin:25px 30px;
          // width: 30%;
          .item-view-img{
            // width: 25px;
          }
          .item-view-num{
            color: #05f5fe;
            position:absolute;
            left:30px;
            top:-5px;
          }
          .item-view-name{
            width: 100px;
            position:absolute;
            left:30px;
            top:16px;
          }
        }
    }
  .btm {
    display: flex;
    margin:10px 10px 0 10px;
    background-image: url("@/assets/img/MountingsStore/kuang1.png");
    /* 使背景图片铺满整个元素 */
    // background-size: cover;
    /* 固定高度 */
    background-size: 100% 100%;
    /* 其他可能的背景样式 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    width: calc(100% - 20px);
    // background-color: red;
    height: 40%;
    .btm-left{
      // float: left;
      background-image: url("@/assets/img/MountingsStore/indicator2.png");
        width: 100px;
        height: 70px;
        background-size: 100% 100%;
        /* 其他可能的背景样式 */
        background-position: center; /* 背景图片居中 */
        background-repeat: no-repeat; /* 不重复背景图片 */
        text-align: center;
        margin:20px;
        .btm-text{
          .btm-text-num{
            color: #05f5fe;
            font-size: 26px;
            font-weight: bold;
          }
          .btm-text-name{

          }
          .title-text{
            margin-top: 40px;
            background: #164A8A;
            // background: linear-gradient(to right, #091E54 0%,#0D3269 30%, #13518A 50%, #0D3269 70%,#091E54 100%);
            background: linear-gradient(to right, rgba(124,178,255,0.00), #13518A 50%, rgba(124,178,255,0.00) 100%);
            border-top: 1px solid #1785D0; /* 上边框 */
            border-bottom: 1px solid #1785D0; /* 下边框 */
            border-image: linear-gradient(to right, rgba(0,0,0,.1) 0%, #1785D0 50%, rgba(0,0,0,.1) 100%) 1;
            height: 20px;
            line-height: 20px;
            text-align: center;
            white-space: nowrap;       /* 确保文本不会换行 */
            overflow: hidden;          /* 隐藏超出容器的部分 */
            text-overflow: ellipsis;   /* 显示省略号 */
          }
        }
    }
    .item-view{
          // display: flex;
          float: left;
          // width:25%;
          position: relative;
          margin:45px;
          // width: 30%;
          .item-view-img{
            // width: 25px;
          }
          .item-view-num{
            color: #05f5fe;
            position:absolute;
            left:30px;
            top:-5px;
          }
          .item-view-name{
            width: 100px;
            position:absolute;
            left:30px;
            top:16px;
          }
        }
  }
  .item-view-num2{
    color: rgb(255, 126, 24) !important;
    font-weight: bold;
    transform: scale(1.5)
  }
  .item-view-num3{
    color: rgb(255, 66, 66) !important;
    font-weight: bold;
    animation: grow 1s infinite alternate;
  }
  @keyframes grow {
            0% {
              transform: scale(1.5); /* 原始大小 */
            }
            50% {
              transform: scale(2); /* 放大到原来的1.5倍 */
            }
            100% {
              transform: scale(1.5); /* 恢复到原始大小 */
            }
          }
}
</style>